<template>
  <div>
    <div class="content">
      <div>
        <a-space :size="30">
          <div style="display: flex">
            <a-space>
              <div>单位编号：</div>
              <a-input-search search-button placeholder="请输入单位编码" />
            </a-space>
          </div>
          <div style="display: flex">
            <a-space>
              <div>单位名称：</div>
              <a-input-search search-button placeholder="请输入单位名称" />
            </a-space>
          </div>
          <div>
            <a-space>
              <a-button type="primary">
                <template #icon> <icon-search /> </template>搜索</a-button
              >
              <a-button>
                <template #icon> <icon-sync /> </template>重置</a-button
              >
            </a-space>
          </div>
        </a-space>
      </div>
      <div style="margin-top: 20px">
        <a-space :size="20">
          <a-button type="primary" @click="addproduct">
            <template #icon> <icon-plus /> </template>新增</a-button
          >
          <a-button type="outline">
            <template #icon> <icon-upload /> </template>导出</a-button
          >
          <a-button type="outline" status="warning">
            <template #icon> <icon-download /> </template>导入</a-button
          >
        </a-space>
      </div>
      <div>
        <!-- <tableTurn ></tableTurn> -->
      </div>
    </div>
    <addProduct v-model:visible="modalVisible"></addProduct>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import addProduct from './components/add-product/index.vue';

  const modalVisible = ref(false);

  const addproduct = () => {
    modalVisible.value = true;
  };
</script>

<style scoped lang="less">
  .content {
    padding: 20px;
  }
</style>
